<template>
  <div>
    <ComHeader title="管理收货地址" leftArrow="true"/>
    <div class="Address-box">
      <div class="address-one">
        <p class="left">配送地址</p>
        <p class="right theme-color" @click="goAdd_address">+添加地址</p>
      </div>
      <div
        class="pay-address"
       
        v-for="(list,index) in data"
        :key="index"
        :class="list.isdefault == 1?'active':''"
      >
        <p class="address-box"  @click="fnSelectAds(list)">
          <span class="name">收货人：{{list.name}}</span>
          <span class="phone">{{list.phone}}</span>
        </p>
        <p class="address-zipcode"  @click="fnSelectAds(list)">邮政编码：{{list.zipcode}}</p>
        <p
          class="address-details"
           @click="fnSelectAds(list)"
        >收货地址：{{list.province}} {{list.city}} {{list.quxian}} {{list.address}}</p>
        <div class="address-operation">
          <div class="address-operation-box">
            <div class="box-left">
              <span v-if="list.isdefault=='1'" class="iconfont icon-kongxinduigou"></span>
              <span v-else class="box-not" @click="fnSetDefault(list)"></span>
            </div>
            <div class="box-right">
              <i class="iconfont icon-bianji" @click="editAddress(list)"></i>
              <i class="iconfont icon-shanchu" @click="removeAddress(list.seqid)"></i>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>


<script>
import api from "@/fetch/api";
import ComHeader from "@/common/ComHeader";
import { mapState, mapMutations, mapGetters } from "vuex";
import { MessageBox, Toast, Switch } from "mint-ui";
export default {
  data() {
    return {
      nowIndex: 0,
      data: null
    };
  },
  components: {
    ComHeader,
    MessageBox,
    Toast,
    Switch
  },
  created() {
    this.initAddess()
  },
  computed: {
    address() {
      return this.$store.state.address;
    },
    ...mapGetters(["this.$store.state.address"], ["this.$store.state.nowIndex"])
  },
  methods: {
    initAddess() {
      const params = {
        username: this.getUserId()
      };
      api
        .takeaddressList(params)
        .then(res => {
          console.log(res);
          console.log("地址");
          this.print(res.data);
        })
        .catch(error => {
          this.print(error);
          console.log("地址1");
          if (error.status === 200 && !error.data.code) {
            this.data = error.data.data;
          }
        });
    },

    /**
     *
     * @desc 设为默认地址
     */
    fnSetDefault(_item) {
      api.setdefaultadd({ seqid: _item.seqid }).catch(res => {
        if (res.status === 200 && !res.data.code) {
          Toast("设置成功");
          this.initAddess()
        }
      });
    },
    fnSelectAds(item) {
      if (this.$route.query.source) {
        this.$router.go(-1);
        window.localStorage.setItem("adsData", JSON.stringify(item));
      }
    },
    // 删除收货地址
    removeAddress(id) {
      var seqid = id;
      MessageBox.confirm("确定删除该条收货地址么？").then(index => {
        const params = {
          username: this.getUserId(),
          id: seqid
        };
        api
          .takeaddressRemove(params)
          .then(res => {
            this.print(res.data);
          })
          .catch(error => {
            this.print(error);
            Toast("删除成功！");
            setTimeout(() => {
              //this.data = error.data;
              this.initAddess()
            }, 1000);
          });
      });
    },
    //新增收货地址
    goAdd_address() {
      localStorage.removeItem("editAddress");
      this.$router.push({
        path: "add_address"
      });
    },
    //编辑收货地址
    editAddress(list) {
      this.setlocalStorage("editAddress", list);
      this.$router.push({
        path: "add_address",
        query: {
          type: "edit"
        }
      });
    }
  }
};
</script>


<style lang="stylus" scoped>
.active {
}

.box-not {
  width: 20px;
  height: 20px;
  display: inline-block;
  border-radius: 50%;
  border: 1px solid #e5e5e5;
  margin-top: 15px;
}

.Address-box {
  padding-top: 1.45rem;

  .address-one {
    width: 100%;
    height: 1.6rem;
    line-height: 1.6rem;
    background: #ffffff;
    margin-bottom: 0.2rem;
    border-top: 1px solid #eaeaea;

    .left {
      float: left;
      margin-left: 0.6rem;
      font-size: 0.37rem;
    }

    .right {
      float: right;
      margin-right: 0.6rem;
      font-size: 0.37rem;
    }
  }

  .pay-address {
    width: 100%;
    height: 4.4rem;
    background: #ffffff;
    background-size: 1.6rem;
    margin-top: 0.3rem;
    display: block;

    .address-box {
      width: 87%;
      margin: auto;
      font-size: 0.4rem;
      padding-top: 0.3rem;
      padding-bottom: 0.3rem;

      .phone {
        float: right;
      }
    }

    .address-details {
      width: 87%;
      height: 1rem;
      margin: auto;
      color: #666;
      font-size: 0.38rem;
    }

    .address-zipcode {
      width: 87%;
      padding-bottom: 0.2rem;
      margin: auto;
      color: #666;
      font-size: 0.38rem;
    }

    .address-operation {
      width: 100%;
      height: 1.2rem;
      line-height: 1.2rem;
      margin-top: 0.3rem;

      .address-operation-box {
        width: 100%;
        border-top: 1px solid #eaeaea;

        i {
          float: right;
          font-size: 0.5rem;
          margin-right: 0.8rem;
          color: #a3a3a3;
        }
      }
    }
  }
}

.address-operation-box {
  overflow: hidden;

  .box-left {
    float: left;
    padding-left: 0.4rem;
    padding-top: -0.2rem;
    color: #00acff;

    .iconfont {
      font-size: 0.5rem;
    }
  }

  .box-right {
    float: right;
  }
}
</style>
